<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <style>
        /* 设置 body 元素的样式 */
        body {
            font-family: Arial, sans-serif; /* 设置字体为 Arial，如果 Arial 不可用，则使用无衬线字体 */
            background-color: #f4f4f4; /* 设置背景颜色为浅灰色 */
            display: flex; /* 使用 Flexbox 布局 */
            flex-direction: column; /* 将子元素垂直排列 */
            justify-content: center; /* 垂直居中子元素 */
            align-items: center; /* 水平居中子元素 */
            height: 100vh; /* 设置 body 的高度为视口的 100% */
            margin: 0; /* 移除默认的外边距 */
            background-image: url('images/IMG_20230911_163340.jpg'); /* 设置背景图片路径 */
            background-size: cover; /* 背景图片覆盖整个页面 */
            background-position: center; /* 背景图片居中显示 */
            background-repeat: no-repeat; /* 背景图片不重复 */
        }

        /* 设置 h2 标题的样式 */
        h2 {
            margin-bottom: 40px; /* 设置标题下方的外边距为 20px */
        }

        /* 设置链接容器的样式 */
        .links {
            display: flex; /* 使用 Flexbox 布局 */
            gap: 20px; /* 设置链接之间的间距为 20px */
        }

        /* 设置链接的样式 */
        .links a {
            text-decoration: none; /* 移除链接的下划线 */
            color: #5fbae9; /* 设置链接颜色为浅蓝色 */
            font-weight: bold; /* 设置链接文字加粗 */
        }

        /* 设置链接在鼠标悬停时的样式 */
        .links a:hover {
            color: #4a9ad4; /* 鼠标悬停时，链接颜色变为深蓝色 */
        }
    </style>
</head>
<body>

<h2>欢迎来到图书商城</h2>
<div class="links">
    <a href="login">登录</a>
    <a href="register.jsp">注册</a>

</div>
</body>
</html>